<template>
  <view class="center">
    <view class="logo-title">    
      <view class="logo-img">
        <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/loginTitle.png"></image>
      </view>
      <view class="subTitle">1门课程7大能力</view>
    
    </view>
    <view class="atpresent">
      <view class="phone-ben">
        <view class="no-rigster">{{ phoneNum ? '134****3911' : '暂未登陆'}}</view>
        <view class="btn-cut" @click="cutRegister">{{ loginTetle }}</view>
      </view>
    </view>
    <view class="icon-input">
      <view class="redeemcode-img">
        <image :src="redeemcode.length? redeemImg.altveImg : redeemImg.notChange"></image>
      </view>
      <view class="marking"></view>
      <input
        v-model="redeemcode"
        class="code-input"
        type="digit"
        maxlength="6" 
        placeholder="请输入兑换码" 
        placeholder-style="font-size:28rpx;color: #8C8C8C;" 
       />
    </view>
    <view class="atonce-trade" @click="addRedeem">立即兑换</view>
     <!-- 更换手机弹窗 -->
     <banding-phone ref="popupTrade"></banding-phone>
  </view>
</template>

<script>
  import bandingPhone from '@/components/loding/binding.vue'
  export default {
    components: { bandingPhone },
    data() {
      return{
        redeemcode:'',
        redeemImg: {
          altveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/redeemCode2.png',
          notChange: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/redeemCode1.png'
        },
        phoneNum: false,
        loginTetle: '立即登录'
      }
    },
    onLoad() {
      const vm = this
      const authorization = uni.getStorageSync('authorization')
      this.$wechat.unseBehavior()
    },
    methods:{
      // 立即兑换
      addRedeem() {
        
      },
      // 打开换手机号弹窗
      cutRegister() {
        this.$refs.popupTrade.getPopupOpen()
      },
    }
  }
</script>

<style lang="scss" scoped>
  .center{
    color: #262626;
    .logo-title{
      padding: 64rpx 0 80rpx 0;
      .logo-img{
        width: 356rpx;
        height: 80rpx;
        margin: auto;
      }
      .subTitle{
        text-align: center;
        font-size: 40rpx;
        font-weight: bold;
        margin-top: 8rpx;
        letter-spacing: 0.25em;
      }
    }
    .atpresent{
      width: 512rpx;
      height: 96rpx;
      border-radius: 48rpx;
      border: 2rpx solid  #EEEEEE;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: auto;
      margin-bottom: 32rpx;
      .phone-ben{
        width: 100%;
        padding: 0 16rpx 0 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .no-rigster{
          font-size: 28rpx;
        }
        .btn-cut{
          width: 186rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          border-radius: 32rpx;
          color: #FFFFFF;
          background: #FF800C;
          font-size: 24rpx;
        }
      }
    }
    .icon-input{
      width: 512rpx;
      height: 96rpx;
      border-radius: 48rpx;
      border: 2rpx solid  #EEEEEE;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      margin: auto;
      padding: 0 32rpx;
      .redeemcode-img{
        width: 48rpx;
        height: 48rpx;
      }
      .marking{
        width: 2rpx;
        height: 32rpx;
        background: #EEEEEE;
        margin: 0 16rpx;
      }
      .code-input{
       width: 224rpx;
      }
    }
    .atonce-trade{
      width: 512rpx;
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
      background: #ff800c;
      border-radius: 48rpx;
      color: #FFFFFF;
      margin: auto;
      margin-top: 352rpx;
      font-weight: bold;
      font-size: 36rpx;
    }
  }
</style>
